import React from 'react';
import moment from 'moment';
import { useTablePipeline } from 'ali-react-table';
import { AntdBaseTable } from '@/base/TBaseTable';
import type { IPriceDiffListDataType, IValuesType, IFormValue } from '../../type';
import styles from './index.less';

interface IProps {
  /**
   * 数据源
   */
  dataSource?: IPriceDiffListDataType[];
  /**
   * 选中的阻塞引起价差信息
   */
  checkedPriceDiffInfo?: IFormValue;
  /**
   * 点击事件
   */
  onClick?: (record: IFormValue) => void;
}

const List = (props: IProps) => {
  const { dataSource = [], checkedPriceDiffInfo = {}, onClick } = props;

  const tableHead: IValuesType[] = dataSource?.length ? dataSource[0]?.values || [] : [];

  // 点击事件
  const _onClick = (data: IFormValue) => {
    onClick && onClick(data);
  };

  const getColumns = (_tableHead: IValuesType[]) => {
    const _list = _tableHead.map((item) => {
      return {
        code: `${item.diffPriceSum}`,
        name: `${item.blockName}`,
        align: 'center',
        width: 100,
        render(v: number, record: IPriceDiffListDataType) {
          const _obj = record?.values?.find((i) => {
            return i?.blockName === item?.blockName;
          });
          const _value = _obj ? _obj?.diffPriceSum : '';
          return (
            <div
              className={`${styles.oneCell} ${styles.oneCellClixck} ${
                _value == 0 && styles.isZeroCell
              } ${
                checkedPriceDiffInfo?.beginDate === record?.calendarDate &&
                checkedPriceDiffInfo?.blockName === item?.blockName &&
                styles.isClickCell
              }`}
              onClick={() =>
                _onClick({
                  blockName: item.blockName,
                  beginDate: record?.calendarDate,
                  endDate: record?.calendarDate,
                })
              }
            >
              {_value ?? '-'}
            </div>
          );
        },
      };
    });
    return [
      {
        code: 'calendarDate',
        name: '日期',
        align: 'left',
        width: 100,
        lock: true,
        render(v: string) {
          return <div className={styles.oneCell}>{v ? moment(v).format('YYYYMMDD') : '-'}</div>;
        },
      },
      ..._list,
    ];
  };

  const pipeline = useTablePipeline()
    .input({ dataSource: dataSource, columns: getColumns(tableHead) as any })
    .primaryKey('calendarDate')
    .appendRowPropsGetter((): any => {
      const color = '#222629';
      return {
        style: { '--bgcolor': color, '--hover-bgcolor': color },
      };
    });

  return (
    <div className={`${styles.container}`}>
      <AntdBaseTable
        className={`${styles.table_list} `}
        useVirtual={{ horizontal: true, vertical: true, header: false }}
        style={{
          '--row-height': '28px',
          // '--header-bgcolor': '#383C3E',
          '--header-row-height': '28px',
          '--cell-padding': '4px 16px',
          '--cell-border-vertical': '1px solid var(--bd)',
          '--header-cell-border-vertical': '1px solid var(--bd)',
          // '--highlight-bgcolor': '#222629',
        }}
        {...pipeline.getProps()}
      />
    </div>
  );
};

export default List;
